<template>
    <f7-page class="text-center bg-color-white">
        <f7-navbar title="下载APP" back-link=" "></f7-navbar>


        <div class="logo-div">
            <img src="../static/logo.jpg" alt="">
        </div>
        <h1>零极生态</h1>
        <p>交易，交流，交换</p>

        <div class="margin-t30">
            <p>动动手指，赶快来下载吧！</p>
        </div>

        <div class="download-box">
            <div class="left">
                <f7-link @click="downloadApp(config.android_url)">
                    <f7-icon icon="iconfont icon-anzhuo"></f7-icon>
                    Android下载
                </f7-link>

                <div class="img-div">
                    <canvas id="canvas"></canvas>
                </div>
            </div>
            <div class="left">
                <f7-link @click="downloadApp(config.iphone_url)">
                    <f7-icon icon="iconfont icon-ios"></f7-icon>
                    IOS下载
                </f7-link>

                <div class="img-div">
                    <canvas id="canvas2"></canvas>
                </div>
            </div>
        </div>

    </f7-page>
</template>

<script>
    import QRCode from "qrcode";

    export default {
        name: "download",
        computed: {
            config() {
                return this.$store.getters.config.config;
            }
        },
        mounted() {
            this.useQrCode();
        },
        methods: {
            useQrCode(){
                var canvas = document.getElementById('canvas')
                var canvas2 = document.getElementById('canvas2')
                QRCode.toCanvas(canvas, this.config.android_url, function (error) {
                    if (error) console.error(error)
                    console.log('QRCode success!');
                })
                QRCode.toCanvas(canvas2, this.config.iphone_url, function (error) {
                    if (error) console.error(error)
                    console.log('QRCode success!');
                })
            },
            downloadApp(url) {
                window.open(url);
            }
        }
    }
</script>

<style scoped lang="scss">
    .logo-div {
        width: 50%;
        margin: 50px auto 10px;
    }
    .text-center {
        /*background: #21B3FC;*/
        /*color: #fff;*/
    }
    h1 {
        margin: 0 0 10px;
    }
    .margin-t30 {
        margin-top: 150px!important;
    }
    .download-box {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        .img-div {
            margin-top: 100px;
        }
        .link {
            min-width: 300px;
            /*color: #fff;*/
            border: 1px solid $mainColor;
            padding:  10px $padding;
            border-radius: 50px;
            .iconfont{
                font-size: 40px;
                margin-right: 10px;
            }
        }
        > div:first-child {
            padding-right: $padding20;
        }
    }
</style>